<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图表统计</title>
    <link rel="stylesheet" href="../static/css/diagram.css">
    <script type="text/javascript" src="../static/js/diagram.js"></script>
    <script src="../static/js/echarts.js"></script>
</head>

<body>

<!-- 整个网页 -->
<div id="web_all">

    <!--header start--><header>
    <div id="header_div">
        <table id="header_table" cellpadding="10">
            <tr>

                <td>
                    <div class="logo" ><!-- 这是主logo -->
                    	<a href="http://127.0.0.1:5000/index">
                    		<img id="logo_main" src="../static/img/douban.png" title="点我回到首页哟">
                    	</a>
                        
                    </div> 
                </td>
        
                <td>
                    <div class="word"><!-- 主网页标题 -->
                        <p class="word" id="title">图表统计</p>
                    </div>
                </td>
            </tr>
        </table>

    </div>

    </header><!-- header end -->

    <hr/>

    <!-- 主体部分 -->
    <!-- main start --><main>
        <div id="main_div">
        	 <center><div id="main" style="width: 600px;height:400px;"></div></center>
        <script type="text/javascript">
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('main'), 'dark');

      // 指定图表的配置项和数据
      var option = {
          xAxis: {
            type: 'category',
            data: {{ scores }}
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: {{ new_count_list }},
              type: 'bar',
              showBackground: true,
              backgroundStyle: {
                color: 'rgba(180, 180, 180, 0.2)'
              }
            }
          ]
        };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    </script>

        </div>


    </main><!-- main end -->

    <hr/>

    <!-- main footer --><footer>

        <table id="footer_table" align="center" cellpadding="0">
            
            <tr>
                <td class="footer_td">
                    <p id="footer_p1" class="footer_p">@</p>
                </td>
                <td class="footer_td">
                    <p id="footer_p2" class="footer_p">版</p>
                </td>
                <td class="footer_td">
                    <p id="footer_p3" class="footer_p">权</p>
                </td>
                <td class="footer_td">
                    <p id="footer_p4" class="footer_p">归</p>
                </td>
                <td class="footer_td">
                    <p id="footer_p5" class="footer_p">源</p>
                </td>
                <td class="footer_td">
                    <p id="footer_p6" class="footer_p">哥</p>
                </td>
                <td class="footer_td">
                    <p id="footer_p7" class="footer_p">所</p>
                </td>
                <td class="footer_td">
                    <p id="footer_p8" class="footer_p">有</p>
                </td>
            </tr>

        </table>

    </footer><!-- footer end -->

</div>

</body>
</html>